起步

基本配置

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

1. 创建webpack-demo目录并进入
2. 创建默认项目
3. 安装本地依赖webpack

创建一个src目录，里面放我们的源文件。写俩个js文件：

//demo1
import word from './demo2';
document.write(word);

//demo2
const word = "Hello webpack";
export default word;

运行webpack，在dist目录下打包成一个文件bundle.js：

"./node_modules/.bin/webpack" src/demo1.js dist/bundle.js

然后在根目录新建一个index.html文件，引入该bundle.js文件。打开浏览器，你可以发现可以正常显示"Hello webpack"。

使用配置文件

实际项目往往很复杂，运行命令来打包很繁琐，这一切都可以通过配置文件来解决。

首先在项目根目录下创建一个webpack.config.js文件，编辑：

var path = require('path');//加载node内置路径模块

module.exports = {
    entry:"./src/demo1.js", //配置入口文件
    output:{
        filename:"bundle.js", // 出口文件名
        path:path.resolve(__dirname,'dist')  //出口文件路径
    }
}

命令行运行：

"./node_modules/.bin/webpack" --config webpack.config.js

可以看到在dist目录下生成了bundle.js文件。

事实上，上述命令可以省略 '--config webpack.config.js'，因为默认就会运行该文件，这意味着可以为webpack配置文件取别名，然后手动指定来运行。

使用npm命令

每次运行都要写一个本地路径也挺麻烦的，可以通过npm scripts来配置一个短命令来代替上述方案。

修改package.json文件，在scripts一项里自定义一个命令：

{
    scripts:{
        "build":"webpack --config webpack.config.js"
    }
}

然后命令行运行：

npm run build

也可以看到在dist目录下生成了bundle.js文件。